<template>
	<view class="bg-gray light">
		<scroll-view :scroll-y="modalName==null" class="page" :class="modalName!=null?'show':''">
			<cu-custom bgColor="bg-yellow">
				<block slot="content">
					<p style="font-weight: 600;">首页</p>
				</block>
			</cu-custom>
			<!-- logo -->
			<view class="billboard-join-model">
				<view class="top-join-model flex">
					<view class="flex-sub">
						<image src="../../static/john.png" class="log-img" mode=""></image>
					</view>
					<view class="flex-twice">
						<p style="font-size: 26px;font-weight: 600;padding-left: 60upx;">欢迎光临 !!!</p>
					</view>
				</view>
			</view>
			<!-- 信息栏 -->
			<view class="billboard-content">
				<view class="top-content">
					<view class="padding bg-white" style="width: 100%;">
						<!-- 营业状态 -->
						<view class="solid-bottom padding-sm">
							<view class="cu-tag radius" :class="systemInfo.sysTag.color">{{systemInfo.sysTag.label}}</view>
						</view>
						<!-- 地址 -->
						<view class="solid-bottom padding-sm">
							<view class="text-cut">
								<view class="cu-capsule">
									<view class='cu-tag bg-blue light text-white'>
										<text class='cuIcon-locationfill'></text>
									</view>
									<view class="cu-tag line-black" @click="openMap">
										{{systemInfo.address}}
									</view>
								</view>
							</view>
						</view>
						<!-- WIFI -->
						<view class="solid-bottom padding-sm" @tap="showModal" data-target="bottomModal">
							<view class="text-cut">
								<view class="cu-capsule">
									<view class='cu-tag bg-green light text-white'>
										<text class='cuIcon-wifi'></text>
									</view>
									<view class="cu-tag line-black">
										WIFI：{{systemInfo.wifi.text}}
									</view>
								</view>
							</view>
						</view>
						<!-- 联系电话 -->
						<view class="solid-bottom padding-sm">
							<view class="text-cut">
								<view class="cu-capsule">
									<view class='cu-tag bg-orange light text-white'>
										<text class='cuIcon-mobilefill'></text>
									</view>
									<view class="cu-tag line-black" @click="callPhone('18661213431')">
										电话：{{systemInfo.phone}}
									</view>
								</view>
							</view>
						</view>

						<!-- 注意事项 -->
						<view class="solid-bottom padding-sm">
							<view>
								<view class="cu-capsule">
									<text class="wraning">
										{{systemInfo.displaycard}}
									</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 快捷功能 -->
			<view class="billboard-tool">
				<view class="cu-bar bg-white solid-bottom margin-top">
					<view class="action">
						<text class="cuIcon-title text-orange "></text> 我的工具
					</view>
					<view class="action">
						<button class="cu-btn round sm bg-green shadow animation-reverse animation-shake"
							@tap="showModal" data-target="gridModal">设置</button>
					</view>
				</view>
				<view class="cu-modal" :class="modalName=='gridModal'?'show':''" @tap="hideModal">
					<view class="cu-dialog" @tap.stop>
						<radio-group class="block" @change="Gridchange">
							<view class="cu-list menu text-left">
								<view class="cu-item" v-for="(item,index) in 3" :key="index">
									<label class="flex justify-between align-center flex-sub">
										<view class="flex-sub">{{index +3}} 列</view>
										<radio class="round" :value="(index + 3) + ''"
											:class="gridCol==index+3?'checked':''" :checked="gridCol==index+3"></radio>
									</label>
								</view>
							</view>
						</radio-group>
						<view class="cu-list menu text-left solid-top">
							<view class="cu-item">
								<view class="content">
									<text class="text-grey">边框</text>
								</view>
								<view class="action">
									<switch @change="Gridswitch" :class="gridBorder?'checked':''"
										:checked="gridBorder?true:false"></switch>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="cu-list grid" :class="['col-' + gridCol,gridBorder?'':'no-border']">
					<view class="cu-item" v-for="(item,index) in cuIconList" :key="index">
						<view :class="['cuIcon-' + item.cuIcon,'text-' + item.color]" @click="play(item)">
							<view class="cu-tag badge" v-if="item.badge!=0">
								<block v-if="item.badge!=1">{{item.badge>99?'99+':item.badge}}</block>
							</view>
						</view>
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''" @tap="hideModal">
			<view class="cu-dialog" @tap.stop>
				<view class="cu-bar bg-white">
					<view class="action text-green" @click="content_wf">一键接入</view>
				</view>
				<view class="padding">
					<view class="padding-top padding-bottom text-center">WIFI: LUX / LUX_5G</view>
					<view class="padding-bottom text-center">密码: ycy333221</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getDetails
	} from '@/api/system.js';
	export default {
		name: "join",
		data() {
			return {
				cuIconList: [{
					cuIcon: 'medalfill',
					color: 'yellow',
					badge: 120,
					name: '麻酱计分',
					router:null
				}, {
					cuIcon: 'github',
					color: 'black',
					badge: 1,
					name: '狼人杀',
					router:null
				}, {
					cuIcon: 'emojiflashfill',
					color: 'red',
					badge: 0,
					name: '血染钟楼',
					router:null
				}, {
					cuIcon: 'hotfill',
					color: 'brown',
					badge: 22,
					name: '剧本杀',
					router:null
				}, {
					cuIcon: 'upstagefill',
					color: 'pink',
					badge: 0,
					name: '酒局',
					router:null
				}, {
					cuIcon: 'activityfill',
					color: 'blue',
					badge: 0,
					name: 'City Walk',
					router:null
				}, {
					cuIcon: 'discoverfill',
					color: 'olive',
					badge: 0,
					name: '朋友圈',
					router:null
				}, {
					cuIcon: 'choicenessfill',
					color: 'gray',
					badge: 0,
					name: '桌游',
					router:null
				}, {
					cuIcon: 'questionfill',
					color: 'mauve',
					badge: 0,
					name: '帮助',
					router:null
				}, {
					cuIcon: 'notificationforbidfill',
					color: 'purple',
					badge: 0,
					name: '意见反馈',
					router:null
				}],
				modalName: null,
				gridCol: 4,
				gridBorder: false,
				systemInfo:{
					sysTag:{
						color:null,
						label:null,
					},
					address:null,
					lon:null,
					lat:null,
					wifi:{
						text:null,
						password:null,
					},
					phone:null,
					displaycard:null,
				}
			}
			
		},
		mounted() {
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			this.gridCol=uni.getStorageSync('gridCol')==''?4:uni.getStorageSync('gridCol');
			this.gridBorder=uni.getStorageSync('gridBorder')==''?false:uni.getStorageSync('gridBorder');
			this.details();
			uni.hideLoading();
		},
		methods: {
			details(){
				getDetails({id:1}).then(res => {
					let sys=res.data.data;
					this.systemInfo={
						sysTag:{
							color:sys.tag.split(',')[0],
							label:sys.tag.split(',')[1],
						},
						address:sys.address,
						lon:sys.longitude,
						lat:sys.latitude,
						wifi:{
							text:sys.wifi.split(',')[0],
							password:sys.wifi.split(',')[1],
						},
						phone:sys.phone,
						displaycard:sys.displaycard
					};
					// console.log(this.systemInfo);
				}).catch(err => {
					this.islogin=false;	
					uni.showToast({
						title: err,
						icon: 'none',
					});
				})
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null;
				// uni.showToast({
				// 	title: '爷流量贼多，不连！',
				// 	icon: 'error'
				// })
			},
			Gridchange(e) {
				this.gridCol = e.detail.value;
				uni.setStorageSync('gridCol', e.detail.value);
			},
			Gridswitch(e) {
				this.gridBorder = e.detail.value;
				uni.setStorageSync('gridBorder', e.detail.value);
			},
			content_wf() {

				// 获取手机型号

				let that = this;
				that.hideModal();
				console.log(that);
				uni.getSystemInfo({
					success: (res) => {
						let system = ''
						console.log("当前手机型号===>", res)
						if (res.platform == 'android') {
							system = parseInt(res.platform.substr(8))
						}
						if (res.platform == 'ios') {
							system = parseInt(res.platform.substr(4))
						}
						if (res.platform == 'android' && system < 6) {
							uni.showToast({
								title: '手机版本不支持',
								icon: 'none'
							})
							return
						}
						if (res.platform == 'ios' && system < 11.2) {
							uni.showToast({
								title: '手机版本不支持',
								icon: 'none'
							})
							return
						}
						//初始wifi模块
						that.start_wifi()

					}
				})

			},
			start_wifi() {
				let that = this
				console.log(that);
				uni.startWifi({
					success: (res) => {
						console.log("startWifi==>", res)
						that.connected()
					},
					fail: (error) => {
						console.log(error)
						uni.showToast({
							title: '链接失败',
							icon: 'error'
						})
					}
				})
			},
			connected() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				let that = this
				// console.log(that);
				uni.connectWifi({
					SSID: 'LUX', //Wi-Fi 设备名称
					password: 'ycy333221', //Wi-Fi 密码
					success: (res) => {
						console.log(res);
						uni.showToast({
							title: "链接成功",
						})
						uni.hideLoading();
					},
					fail: (error) => {
						uni.showToast({
							title: '链接失败',
							icon: 'error',
						})
						uni.hideLoading();
					}
				})
			},
			// 拨打电话
			callPhone(tel) {
				uni.makePhoneCall({
					phoneNumber: tel
				})
			},
			// 定位导航
			openMap() {
				let lon=this.systemInfo.lon;
				let lat=this.systemInfo.lat;
				console.log("获取经纬度ssssfff", lon, lat);
				//打开地图，并将门店位置传入
				uni.getLocation({
					success: res => {
						// res.latitude=lat;
						// res.longitude=lon;
						console.log('location success', parseFloat(lat), parseFloat(lon))
						uni.openLocation({
							latitude: parseFloat(lat),
							longitude: parseFloat(lon),
							scale: 18,
							name: '袁楚懿的大House',
							address: '四川省成都市双流区怡心街道中海右岸一期',
						})
					}
				})
			},
			// 进入游戏
			play(item){
				if(item.router==null){
					uni.showToast({
						title: '敬请期待！',
						icon: 'none',
					});
				}
				else{
					// 跳转
					uni.navigateTo({
						url:item.router
					})
				}
			}
		}
	}
</script>

<style>
	.billboard-join-model {
		height: 280upx;
		padding-top: 40upx;
		padding-right: 3%;
		padding-left: 3%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.top-join-model {
		background-color: #fbbd08;
		min-width: 96%;
		max-height: 200rpx;
		border-radius: 20px;
		display: flex;
		align-items: center;
	}

	.billboard-content {
		padding-right: 3%;
		padding-left: 3%;
		padding-top: 40upx;
		border-radius: 10px;
		display: flex;
		justify-content: center;
	}

	.billboard-tool {
		padding-right: 3%;
		padding-left: 3%;
		padding-bottom: 140rpx;
	}

	.top-content {
		background-color: #ffffff;
		width: 100%;
		border-radius: 10px;
		display: flex;
	}

	.log-img {
		height: 280rpx;
		width: 100%;

	}

	.wraning {
		display: inline-block;
		white-space: pre-wrap;
		word-wrap: break-word;
		height: auto;
		font-weight: 600;
		line-height: 1.5rem;
	}
</style>